<template>
	<view>
		<view class="top">
			<view class="list" v-for="(item,index) in left" :key="index" @click="toast('敬请期待')">
				<image :src="img_pre + item.cover" class="img"></image>
				<view class="title">
					<view class="name">
						{{item.title}}
					</view>
					<image src="../../static/image/a6.png"></image>
				</view>
			</view>
		</view>
		<view class="notice">
			<u-notice-bar padding="24rpx" color="#92662A" mode="vertical" :volumeIcon="false" :moreIcon="false"
				bgColor="transparent" :more-icon="true" :list="notice"></u-notice-bar>
		</view>
		<view class="content">
			<view class="list" @click="toPage(item.url,item.toast)" :style="'background: '+item.background+''"
				v-for="(item,index) in right" :key="index">
				<image :src="item.img" class="img"></image>
				<view class="name">
					{{item.name}}
				</view>
			</view>
			<view class="list" v-if="false" style="background: #FAEBE7;">
				<image src="../../static/image/k8.png" class="img"></image>
				<view class="name">
					敬请期待
				</view>
			</view>
		</view>
		<view class="div"></view>
		<u-tabbar height="100" v-model="current" :show="true" :midButtonSize="midButtonSize" :list="list"
			:mid-button="midButton" :inactive-color="inactiveColor" :activeColor="activeColor"></u-tabbar>
	</view>
</template>

<script>
	var than;
	/* , {
		img: '../../static/image/k7.png',
		name: '手写板',
		background: '#D0E3F5',
		url: '/pages/htmlI/write/index'
	} */
	export default {
		data() {
			return {
				current: 1,
				midButtonSize: "122",
				notice: [],
				list: [{
						"pagePath": "/pages/index/index",
						iconPath: "../../static/image/index2.png",
						selectedIconPath: "../../static/image/index1.png",
						text: '每日',
						isDot: true,
						customIcon: false,
					},
					{
						"pagePath": "/pages/home/index",
						iconPath: "../../static/image/home1.png",
						selectedIconPath: "../../static/image/home1.png",
						text: '蜂盈优品',
						midButton: true,
						customIcon: false,
					},
					{
						"pagePath": "/pages/user/index",
						iconPath: "../../static/image/user2.png",
						selectedIconPath: "../../static/image/user1.png",
						text: '我的',
						isDot: false,
						customIcon: false,
					},
				],
				midButton: true,
				inactiveColor: '#909399',
				activeColor: '#333333',
				left: [],
				right: [{
					img: '../../static/image/k5.png',
					name: '蜂盈商城',
					background: '#FCF5EA',
					url: '/pages/htmlI/store/index'
				}, {
					img: '../../static/image/k6.png',
					name: '活动专区',
					background: '#EAE7F7',
					url: '/pages/htmlH/index/index'
				}, {
					img: '../../static/image/k7.png',
					name: '蜂盈直播',
					background: '#D0E3F5',
					toast: '敬请期待',
					url: '/pages/htmlG/live/list'
				}, {
					img: '../../static/image/k9.png',
					name: '新人活动',
					background: '#FAEBE7',
					url: '/pages/htmlJ/index/index'
				}],
				novice_reward_status: 0,
				recieve_time: 0
			}
		},
		onLoad(option) {
			than = this;
		},
		onShow() {
			than.post('api/future/rollNewspaper', null, function(data) {
				for (let i in data) {
					than.notice.push(data[i].content)
				}
			})
			than.post('api/future/futureList', null, function(data) {
				than.left = data;
			})
			than.post("api/teamhead/addOpenCount", null, function(data) {
				than.novice_reward_status = data.novice_reward_status
				if (data.novice_reward_status) {
					than.recieve_time = data.recieve_time
				}
				than.right[1].url = "/pages/htmlH/index/index?novice_reward_status=" + than.novice_reward_status +
					'&recieve_time=' + than.recieve_time
			})
		},
		methods: {

		}
	}
</script>

<style lang="less">
	.div {
		height: 200rpx;
	}

	.notice {
		margin: 0 72rpx 29rpx;
		background-image: url(../../static/image/pop4.png);
		background-size: 100% 100%;
		height: 80rpx;
		padding-left: 100rpx;
	}

	.top {
		.list {
			width: 604rpx;
			height: 430rpx;
			position: relative;
			margin: auto auto 39rpx;
			border-radius: 20rpx;

			.img {
				border-radius: 20rpx;
				width: 100%;
				height: 358rpx;
			}

			.title {
				bottom: 0;
				position: absolute;
				display: flex;
				align-items: center;
				height: 109rpx;
				width: 100%;
				padding-left: 32rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;

				.name {
					margin-top: 40rpx;
				}

				image {
					margin-left: auto;
					width: 123rpx;
					height: 123rpx;
				}
			}
		}
	}


	.content {
		display: flex;
		padding-left: 72rpx;
		flex-wrap: wrap;

		.list {
			width: 285rpx;
			height: 284rpx;
			margin-right: 36rpx;
			margin-bottom: 36rpx;
			text-align: center;
			border-radius: 20rpx;
			background-size: 100% 100%;

			.img {
				margin: 48rpx 0 35rpx;
				width: 97rpx;
				height: 97rpx;
			}

			.name {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}
		}
	}
</style>
